// 放大镜效果
// 1.整个案例可分为3个功能模块
// 2.鼠标经过小图片盒子，黄色的遮挡层 和大图片盒子显示，离开隐藏这俩盒子
// 3.黄色的遮挡层跟随鼠标功能
// （1）把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准
// （2）首先是获得鼠标在盒子的坐标
// （3）之后把数值给遮挡层作为left和top值
// （4）此时用到鼠标移动事件，但是还是在小图片盒子内移动
// （5）发现，遮挡层位置不对，再需要减去盒子自身高度和宽度的一半
// （6）遮挡层不能超出小盒子范围
// （7）如果小于0，就把坐标设置为0
// （8）如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
// （9）遮挡层的最大移动距离：小图片盒子宽度 减去 遮挡层盒子宽度
// 4.移动黄色遮挡层，大图片跟随移动功能
// （1）求大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigimg = document.querySelector('.bigimg');
    preview_img.addEventListener('mousemove', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    preview_img.addEventListener('mousemove', function (e) {
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        var bigMax = bigimg.offsetWidth - big.offsetWidth;
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigimg.style.left = -bigX + 'px';
        bigimg.style.top = -bigY + 'px';
    })
})